<template>
  <div class="w100p">
    <div
      class="s-tac s-d-flex s-ai-center s-jc-center h287"
      v-if="dataListShow"
    >
      <div>
        <img
          class="w190 h120"
          src="@/assets/nodata.png"
          alt=""
        >
        <div
          style="color:#A8A8A8"
          class="fz14"
        >暂无数据</div>
      </div>
    </div>
    <div
      v-else
      class="h287 w100p"
      id="recoveryTrend"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import * as statisticsApi from "@/api/statistics";
export default {
  data() {
    return {
      dataListShow: false,
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    handleInit() {
      statisticsApi.wasteBaseEachMonth().then((res) => {
        if (res && res.success) {
          let dataArr = [];
          if (res.data && res.data.length != 0) {
            this.dataListShow = false;
          } else {
            this.dataListShow = true;
            return;
          }
          for (let i = 1; i <= 12; i++) {
            let month = res.data.find((item) => {
              return item.month == i;
            });
            if (month) {
              dataArr.push(month.count);
            } else {
              dataArr.push(0);
            }
          }
          let myChart = echarts.init(document.getElementById("recoveryTrend"));
          let option = {
            backgroundColor: "#fff",
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgb(0,0,0, 0.28)",
              textStyle: {
                color: "#fff",
                fontSize:11
              },
              axisPointer: {
                lineStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "red",
                      },
                      {
                        offset: 0.5,
                        color: "#48b3FF",
                      },
                      {
                        offset: 1,
                        color: "#d9efff",
                      },
                    ],
                    global: false,
                  },
                },
              },
              formatter(params) {
                return `<div style="font-size:18px;">${params[0].axisValue}</div>
              <div style="font-size:16px;margin-top:9px;">${params[0].value} KG</div>`;
              },
            },
            grid: {
              top: "5%",
              left: "5%",
              right: "3%",
              bottom: "10%",
              // containLabel: true
            },
            xAxis: [
              {
                type: "category",
                color: "#59588D",
                axisLine: {
                  show: true,
                },
                axisLabel: {
                  color: "#282828",
                },
                splitLine: {
                  // show: true
                },

                axisTick: {
                  show: false,
                },
                // boundaryGap: true,
                data: [
                  "1月",
                  "2月",
                  "3月",
                  "4月",
                  "5月",
                  "6月",
                  "7月",
                  "8月",
                  "9月",
                  "10月",
                  "11月",
                  "12月",
                ],
              },
            ],

            yAxis: [
              {
                type: "value",
                min: 0,
                splitNumber: 4,
                splitLine: {
                  show: true,
                },
                axisLine: {
                  show: true,
                },
                axisLabel: {
                  show: true,
                  // margin: 20,
                  textStyle: {
                    color: "#737373",
                  },
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(131,101,101,0.2)",
                    type: "dashed",
                  },
                },
              },
            ],
            series: [
              {
                name: "",
                type: "line",
                // smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: "circle",
                symbolSize: 3,
                lineStyle: {
                  normal: {
                    color: "#48B3FF",
                  },
                },
                label: {
                  show: false,
                  position: "top",
                  textStyle: {
                    color: "#48B3FF",
                  },
                },

                itemStyle: {
                  color: "#FFF",
                  borderColor: "#48B3FF",
                  borderWidth: 1,
                },
                tooltip: {
                  show: true,
                  trigger: "axis",
                  axisPointer: {
                    textStyle: {
                      color: "#FFF", // 文字的颜色
                      fontStyle: "italic", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                      fontWeight: "bold", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
                      fontSize: "20", // 文字字体大小
                      lineHeight: "50", // 行高
                    },
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(195,230,255,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(195,230,255,0.1)",
                        },
                      ],
                      false
                    ),
                    shadowColor: "rgba(195,230,255,0.1)",
                    shadowBlur: 20,
                  },
                },
                data: dataArr,
              },
            ],
          };
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        }
      });
    },
  },
};
</script>